<template>
    <!-- 通用审批详情弹框 -->
    <a-modal
      class="approval-dialog"
      :footer="null"
      :title="title"
      :closable="true"
      :visible="visible"
      width="1200px"
      @cancel="handleClose"
    >
      <a-tabs
        v-model="key"
        type="card"
        class="mb20"
      >
        <a-tab-pane
          key="1"
          tab="项目流程"
        >
          <img
            style="width: 100%"
            :src="flowChart"
          >
          <s-table
            ref="ApprovetableCurrent"
            bordered
            size="default"
            row-key="key"
            :columns="columnApproveCurrent"
            :data="loadDataCurrent"
            :alert="true"
            show-size-changer
            show-quick-jumper
            :show-pagination="false"
          >
            <span
              slot="serial"
              slot-scope="text, record, index"
            >{{ index + 1 }}</span>
            <template
              slot="opinions"
              slot-scope="text"
            >
              <ellipsis
                :length="30"
                tooltip
              >
                {{ text }}
              </ellipsis>
            </template>
            <template
              slot="userName"
              slot-scope="text"
            >
              <ellipsis
                :length="50"
                tooltip
                placement="right"
              >
                {{ text }}
              </ellipsis>
            </template>
          </s-table>
        </a-tab-pane>
        <a-tab-pane
          key="2"
          tab="项目历史流程"
        >
          <s-table
            ref="Approvetable"
            bordered
            size="default"
            row-key="key"
            :columns="columnApprove"
            :data="loadData"
            :alert="true"
            show-size-changer
            show-quick-jumper
            :show-pagination="true"
            @expand="expand"
          >
            <span
              slot="serial"
              slot-scope="text, record, index"
            >{{ index + 1 }}</span>
            <template
              slot="formData.opinions"
              slot-scope="text"
            >
              <ellipsis
                :length="30"
                tooltip
              >
                {{ text }}
              </ellipsis>
            </template>
            <a-spin
              slot="expandedRowRender"
              slot-scope="record"
              :spinning="record.spinning"
              style="margin: 0"
            >
              <a-table
                bordered
                row-key="id"
                :columns="columnApproveDetail"
                :data-source="record.description"
                :pagination="false"
              />
            </a-spin>
          </s-table>
        </a-tab-pane>
        <a-tab-pane
          key="3"
          tab="竣工流程"
          v-if="projectCompletionId"
        >
          <img
            style="width: 100%"
            :src="flowChart2"
          >
          <s-table
            ref="ApprovetableCurrent"
            bordered
            size="default"
            row-key="key"
            :columns="columnApproveCurrent"
            :data="loadDataCurrent2"
            :alert="true"
            show-size-changer
            show-quick-jumper
            :show-pagination="false"
          >
            <span
              slot="serial"
              slot-scope="text, record, index"
            >{{ index + 1 }}</span>
            <template
              slot="opinions"
              slot-scope="text"
            >
              <ellipsis
                :length="30"
                tooltip
              >
                {{ text }}
              </ellipsis>
            </template>
            <template
              slot="userName"
              slot-scope="text"
            >
              <ellipsis
                :length="50"
                tooltip
                placement="right"
              >
                {{ text }}
              </ellipsis>
            </template>
          </s-table>
        </a-tab-pane>
        <a-tab-pane
          key="4"
          tab="竣工历史流程"
          v-if="projectCompletionId"
        >
          <s-table
            ref="Approvetable"
            bordered
            size="default"
            row-key="key"
            :columns="columnApprove"
            :data="loadData2"
            :alert="true"
            show-size-changer
            show-quick-jumper
            :show-pagination="true"
            @expand="expand"
          >
            <span
              slot="serial"
              slot-scope="text, record, index"
            >{{ index + 1 }}</span>
            <template
              slot="formData.opinions"
              slot-scope="text"
            >
              <ellipsis
                :length="30"
                tooltip
              >
                {{ text }}
              </ellipsis>
            </template>
            <a-spin
              slot="expandedRowRender"
              slot-scope="record"
              :spinning="record.spinning"
              style="margin: 0"
            >
              <a-table
                bordered
                row-key="id"
                :columns="columnApproveDetail"
                :data-source="record.description"
                :pagination="false"
              />
            </a-spin>
          </s-table>
        </a-tab-pane>
      </a-tabs>
    </a-modal>
  </template>
  
  <script>
  import { getProcessNodeList, getProcInstByBusiness, completeTask, getCurrentProcess, getFlowChart } from '@/api/process'
  import { getOrgEmployeesListBy, getProcessGroupPerson } from '@/api/commons'
  import BaseModal from '@/components/BaseModal'
  import { STable } from '@/components'
  import { Ellipsis } from '@/components'
  import JosnBig from 'json-bigint'
  import { getCurrentProcessList } from '@/utils/requestWithParams.js'
  
  const columnApproveCurrent = [
    {
      title: '序号',
      dataIndex: 'serial',
      width: 65,
      scopedSlots: { customRender: 'serial' }
    },
    {
      title: '节点名称',
      dataIndex: 'taskName'
    },
    {
      title: '处理人',
      dataIndex: 'userName',
      scopedSlots: { customRender: 'userName' }
    },
    {
      title: '处理结果',
      dataIndex: 'processStatusName',
      width: 120
    },
    {
      title: '审批意见',
      dataIndex: 'opinions',
      scopedSlots: { customRender: 'opinions' },
      width: 300
    },
    {
      title: '开始时间',
      dataIndex: 'createTime',
      width: 120
    },
    {
      title: '滞留时间',
      dataIndex: 'durationInMillis',
      width: 120
    },
    {
      title: '结束时间',
      dataIndex: 'endTime',
      width: 120
    }
  ]
  const columnApprove = [
    {
      title: '序号',
      dataIndex: 'serial',
      width: 80,
      scopedSlots: { customRender: 'serial' }
    },
    {
      title: '节点名称',
      dataIndex: 'name'
    },
  
    {
      title: '发起人',
      dataIndex: 'userName'
    },
    {
      title: '发起时间',
      dataIndex: 'startTime'
    },
    {
      title: '滞留时间',
      dataIndex: 'durationTime'
    },
    {
      title: '结束时间',
      dataIndex: 'endTime'
    }
  ]
  const columnApproveDetail = [
    {
      title: '审批人',
      dataIndex: 'userName'
    },
    {
      title: '处理结果',
      dataIndex: 'processStatusName',
      width: 120
    },
    {
      title: '审批时间',
      dataIndex: 'createTime'
    },
    {
      title: '节点名称',
      dataIndex: 'taskName'
    },
    {
      title: '滞留时间',
      dataIndex: 'durationInMillis'
    },
    {
      title: '审批意见',
      dataIndex: 'formData.opinions',
      scopedSlots: { customRender: 'formData.opinions' },
      width: 300
    }
  ]
  export default {
    components: {
      BaseModal,
      STable,
      Ellipsis
    },
    props: {
      title: {
        type: String,
        default: '审批详情'
      },
      visible: {
        type: Boolean,
        default: false
      },
      businessId: {
        type: String,
        default: ''
      },
      projectCompletionId: {
        type: String,
        default: ''
      }
    },
    data() {
      this.columnApprove = columnApprove
      this.columnApproveCurrent = columnApproveCurrent
      this.columnApproveDetail = columnApproveDetail
      return {
        approveInfos: [],
        spinning: false,
        key: '1',
        flowChart: '',
        flowChart2: '',
        loadDataCurrent: () => {
            return getCurrentProcessList.call(this, { businessId: this.businessId })
        },
        loadDataCurrent2: () => {
            return getCurrentProcessList.call(this, { businessId: this.projectCompletionId })
        },
        loadData: parameter => {
          parameter.businessId = this.businessId
          return getProcInstByBusiness(parameter).then(res => {
            const data = res.data
            const userIds = []
            data.forEach(item => {
              item.spinning = false
              userIds.push(item.startUser)
              item.endTime = item.endTime || '进行中'
              item.durationTime = item.durationTime || '进行中'
              item.description = []
            })
            if(userIds?.length) {
              return getOrgEmployeesListBy({ userIds, delete: true }).then(employees => {
                this.flowRequesting = false
                res.data.forEach(r => {
                  employees.data.some(e => {
                    if (e.userId === r.startUser) {
                      r.userName = e.name
                      return true
                    }
                  })
                })
                return res
              })
            }
          })
        },
        loadData2: parameter => {
          parameter.businessId = this.projectCompletionId
          return getProcInstByBusiness(parameter).then(res => {
            const data = res.data
            const userIds = []
            data.forEach(item => {
              item.spinning = false
              userIds.push(item.startUser)
              item.endTime = item.endTime || '进行中'
              item.durationTime = item.durationTime || '进行中'
              item.description = []
            })
            if(userIds?.length) {
              return getOrgEmployeesListBy({ userIds, delete: true }).then(employees => {
                this.flowRequesting = false
                res.data.forEach(r => {
                  employees.data.some(e => {
                    if (e.userId === r.startUser) {
                      r.userName = e.name
                      return true
                    }
                  })
                })
                return res
              })
            }
          })
        }
      }
    },
    created() {},
    methods: {
      handleClose() {
        this.$emit('confirm')
      },
      getFlowChart() {
        this.spinning = true
        getFlowChart(this.businessId)
          .then(res => {
            this.spinning = false
            if (res.code === 200) {
              this.flowChart = 'data:image/png;base64,' + res.data
            }
          })
          .catch(() => {
            this.spinning = false
          })
        if(this.projectCompletionId) {
            getFlowChart(this.projectCompletionId).then(res => {
                this.spinning = false
                if (res.code === 200) {
                    this.flowChart2 = 'data:image/png;base64,' + res.data
                }
            })
            .catch(() => {
                this.spinning = false
            })
        }
      },
      expand(expanded, record) {
        if (expanded) {
          this.getProcessNodes(record.procInstId, record)
        }
      },
      getProcessNodes(e, record) {
        record.spinning = true
        getProcessNodeList({ procInstId: e, pageNo: 1, pageSize: 100 })
          .then(res => {
            if (res.code === 200) {
              const data = res.data
              const userIds = data.map(d => {
                if (d.formData) {
                  d.formData = JosnBig.parse(d.formData)
                }
                return d.assignee
              })
              userIds?.length && getOrgEmployeesListBy({ userIds, delete: true })
                .then(employees => {
                  record.spinning = false
                  res.data.forEach(r => {
                    employees.data.some(e => {
                      if (e.userId === r.assignee) {
                        r.userName = e.name
                        return true
                      }
                    })
                  })
  
                  this.$refs.Approvetable.localDataSource.forEach(i => {
                    if (i.procInstId == e) {
                      console.log(data)
                      data.forEach(item => {
                        item.auditResult =
                          item.formData.reject === 'true'
                            ? '审批不通过'
                            : item.formData.reject === 'false'
                            ? '审批通过'
                            : ''
                      })
                      i.description = data
                      console.log(data)
                    }
                  })
                })
                .catch(e => {
                  console.log(e)
                  record.spinning = false
                })
            }
          })
          .catch(() => {
            console.log(e)
            record.spinning = false
          })
      }
    },
    watch: {
      visible(v) {
        if (v) {
          this.$nextTick(() => {
            this.key = '1'
            this.getFlowChart()
            if (this.$refs.Approvetable) {
              this.$refs.Approvetable.refresh()
            }
            if (this.$refs.ApprovetableCurrent) {
              this.$refs.ApprovetableCurrent.refresh()
            }
          })
        } else {
          this.flowChart = ''
          if (this.$refs.Approvetable) {
            this.$refs.Approvetable.localDataSource = []
          }
          if (this.$refs.ApprovetableCurrent) {
            this.$refs.ApprovetableCurrent.localDataSource = []
          }
        }
      }
    }
  }
  </script>
  
  <style>
  .approval-dialog {
    position: relative;
    z-index: 9999999999;
  }
  </style>
  